<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/dat.gui.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
    }
</style>
<div id="main"></div>
<script>

    require([
        'echarts'
        // 'echarts/chart/gauge',
        // 'echarts/component/legend',
        // 'echarts/component/tooltip'
    ], function (echarts) {

        var chart = echarts.init(document.getElementById('main'), null, {});

        var option = {
            aria: {
                show: true
            },
            tooltip: {
                formatter: '{a} <br/>{c} {b}'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '速度',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 220,
                    splitNumber: 11,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        formatter: '{a|{value}} km/h',
                        rich: {
                            a: {
                                color: '#222',
                                textBorderColor: '#fff',
                                textBorderWidth: 2,
                                backgroundColor: 'auto',
                                padding: [2, 4],
                                borderRadius: 3
                            }
                        }
                    },
                    title: {
                        textStyle: { // Test compat
                            fontWeight: 'bolder',
                            fontSize: 26,
                        },
                        offsetCenter: [0, 0],
                        formatter: '{a|单位：}{value}',
                        backgroundColor: '#aabbcc',
                        padding: 10,
                        borderRadius: 5,
                        fontStyle: 'italic'
                    },
                    detail: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        textStyle: { // Test compat
                            backgroundColor: '#eeffee',
                        },
                        offsetCenter: [0, '70%'],
                        borderRadius: 10,
                        borderWidth: 2,
                        borderColor: '#33aa33',
                        shadowBlur: 2,
                        shadowColor: '#222',
                        shadowOffsetX: 5,
                        shadowOffsetY: 5,
                        width: 'auto',
                        rotate: 15,
                        textShadowBlur: 2,
                        textShadowColor: '#66eeaa',
                        textShadowOffsetX: 2,
                        textShadowOffsetY: 3,
                        formatter: [
                            '{a|码表}',
                            '{b|{value}}{c|km/h}',
                            '{j|width is this line is 400}',
                            '{d|left}{lineHeight|}{f|top}{g|bottom}middle{e|right}{e1|右边}'
                        ].join('\n'),
                        rich: {
                            a: {
                                fontSize: 34,
                                color: 'auto',
                            },
                            b: {
                                fontSize: 20,
                                color: '#12294f',
                                align: 'center',
                                padding: [0, 5, 0, 0]
                            },
                            c: {
                                fontSize: 14,
                                color: '#aa99bb',
                                rotate: 30,
                                backgroundColor: '#223344',
                                borderRadius: 3,
                                padding: [2, 10]
                            },
                            d: {
                                align: 'left'
                            },
                            e: {
                                align: 'right'
                            },
                            e1: {
                                color: '#33aa99',
                                fontSize: 16,
                                align: 'right'
                            },
                            f: {
                                verticalAlign: 'top'
                            },
                            g: {
                                verticalAlign: 'bottom'
                            },
                            h: {
                                align: 'center'
                            },
                            i: {
                                align: 'center'
                            },
                            j: {
                                width: 400,
                                backgroundColor: '#aabbcc',
                                color: '#123'
                            },
                            lineHeight: {
                                lineHeight: 46
                            }
                        }
                    },
                    data: [{value: 40, name: 'km/h'}]
                },
                {
                    name: '转速',
                    type: 'gauge',
                    center: ['25%', '55%'],    // 默认全局居中
                    radius: '50%',
                    min: 0,
                    max: 7,
                    endAngle: 45,
                    splitNumber: 7,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        // x, y，单位px
                        offsetCenter: [0, '-30%']
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 12
                        },
                    },
                    data: [{value: 1.5, name: 'x1000 r/min'}]
                },
                {
                    name: '油表',
                    type: 'gauge',
                    center: ['75%', '50%'],    // 默认全局居中
                    radius: '50%',
                    min: 0,
                    max: 2,
                    startAngle: 135,
                    endAngle: 45,
                    splitNumber: 2,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,
                        length: 10,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return 'E';
                                case '1' :
                                    return 'Gas';
                                case '2' :
                                    return 'F';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 0.5, name: 'gas'}]
                },
                {
                    name: '水表',
                    type: 'gauge',
                    center: ['75%', '50%'],    // 默认全局居中
                    radius: '50%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return 'H';
                                case '1' :
                                    return 'Water';
                                case '2' :
                                    return 'C';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 0.5, name: 'gas'}]
                }
            ]
        };

        chart.setOption(option);

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
            option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            chart.setOption(option, true);
        }, 2000);
        // var config = {
        //     labelPosition: 'outside',
        //     clockwise: true,
        //     labelLineLen: 20,
        //     labelLineLen2: 5
        // };

        // function update() {
        //     chart.setOption({
        //         series: [{
        //             name: 'pie',
        //             clockwise: config.clockwise,
        //             label: {
        //                 normal: {
        //                     position: config.labelPosition
        //                 }
        //             },
        //             labelLine: {
        //                 length: config.labelLineLen,
        //                 length2: config.labelLineLen2
        //             }
        //         }]
        //     });
        // }

        // var gui = new dat.GUI();
        // gui.add(config, 'clockwise')
        //     .onChange(update);
        // gui.add(config, 'labelPosition', ['inside', 'outside'])
        //     .onChange(update);
        // gui.add(config, 'labelLineLen', 0, 100)
        //     .onChange(update);
        // gui.add(config, 'labelLineLen2', 0, 100)
        //     .onChange(update);
    })

</script>
</body>
</html>
